﻿var viewModel = {
    customers: html.data([]),
    headers: html.data([
        { field: 'Id', label: 'Mã số' },
        { field: 'FullName', label: 'Họ và tên'},
        { field: 'DateOfBith', label: 'Ngày sinh', type:'date' },
        { field: 'Address', label: 'Địa chỉ' },
        { field: 'PhoneNo', label: 'Email' },
        { field: 'Email', label: 'Email' },
        { field: 'AgeRage', label: 'Email' },
        { field: 'IsVIP', label: 'Email' },
    ]),
    pageIndex: html.data(1),
    totalPage: html.data(1),
    shouldDisplayPagination: html.data(function () {
        return viewModel.totalPage()*viewModel.pageSize() > viewModel.customers().length;
    }),
    pageIndexs: html.data(function(){
        var res = ['&laquo;'];
        for(var i = 1, j=viewModel.totalPage(); i <= j; i++){
            res.push(i);
        }
        res.push('&raquo;');
        return res;
    }),
    pageSize: html.data(10),
    pages: html.data([5,10,25,50]),
    orderBy: html.data("Id"),

    getCustomer: function () {
        var pageIndex = viewModel.pageIndex() - 1;
        utils.ajax({
            url: '/Customer/All',
            data: {pageSize: viewModel.pageSize(), pageIndex: pageIndex, orderBy: viewModel.orderBy()},
            success: function (res) {
                viewModel.customers(res.customers);
                var totalPage = res.total / viewModel.pageSize();
                if (totalPage != viewModel.totalPage()) {
                    viewModel.totalPage(totalPage);
                    viewModel.pageIndexs.refresh();
                }
            }
        });
    }
}
viewModel.orderBy.subscribe(function (val) {
    viewModel.customers.orderBy(val).refresh();
});
viewModel.pageSize.subscribe(function (val) {
    viewModel.getCustomer();
});


//binding data section
$(function () {
    html.get('#customer tbody').each(viewModel.customers, function (customer, index) {
        html.get(this).tr().each(viewModel.headers, function (header, headerIndex) {
            var data = customer[header.field];
            html.get(this).td(data);
            if (headerIndex === viewModel.headers().length - 1) {
                html.get(this).td()
                    .a('', '/Customer/Edit/' + customer.Id).clss('btn btn-primary btn-xs')
                        .i().clss('fa fa-edit fa-lg').$()
                    .$()
                    .a('', '/Customer/Delete/' + customer.Id).clss('btn btn-danger btn-xs')
                        .i().clss('fa fa-minus fa-lg').$()
                    .$();
            }
        });
    });
    html.get('#pageSizer').dropdown(viewModel.pages, viewModel.pageSize);
    html.get('#paginator').each(viewModel.pageIndexs, function (index) {
        var className = index === viewModel.pageIndex() ?'active': '';
        html.get(this)
            .li().clss(className)
                .a(index, '#').click(function (index, e) {
                    if (index === '&raquo;' && index < viewModel.totalPage()) {
                        viewModel.pageIndex(viewModel.pageIndex() + 1);
                    } else if (index === '&raquo;' && index > 1) {
                        viewModel.pageIndex(viewModel.pageIndex() - 1);
                    } else {
                        viewModel.pageIndex(index);
                    }
                    viewModel.getCustomer();
                }, index).$()
            .$()
    });
    html.get('.pagination').visible(viewModel.shouldDisplayPagination);
    viewModel.getCustomer();
});